<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas</title>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
</html>
<script>
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d')
    // 直线
    ctx.lineCap="round";
    ctx.lineWidth=10;
    ctx.strokeStyle="#0000ff";
    ctx.beginPath()
    ctx.moveTo(50,50)
    ctx.lineTo(100,100)
    ctx.stroke()

    // 矩形 x,y,长，宽
    ctx.lineWidth=3;
    ctx.rect(140,40,170,120)
    ctx.stroke()
    ctx.fillRect(150,50,150,100);
    ctx.clearRect(160,70,100,60)

    // 圆 中心  半径 起始角  结束角
    ctx.beginPath()
    ctx.arc(400,100,80,0*Math.PI,2*Math.PI)
    ctx.fill()

    // 文字
    ctx.font="40px Arial"
    ctx.fillText('HELLO WORLD',10,200)

    // 时钟
    ctx.beginPath()
    ctx.arc(150,500,100,0*Math.PI,2*Math.PI)
    ctx.stroke()
    // 圆心
    ctx.moveTo(150,500)
    ctx.arc(150,500,3,0*Math.PI,2*Math.PI)
    ctx.stroke()
    // 数字
    ctx.beginPath()
    for(let i=1;i<13;i++){
        ctx.fillText(i,)
    }



</script>